<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var myChart = echarts.init(document.getElementById('chart'));

		var option = {
			backgroundColor: '#1b1b1b',
			tooltip: {
				formatter: '{a}<br>{c} {b}'
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			series: [
				{
					name: '速度',
					type: 'gauge',
					data: [
						{ name: 'km/h', value: 40 }
					],
					radius: '50%',
					startAngle: 225,
					endAngle: -45,
					clockwise: true,
					min: 0,
					max: 220,
					splitNumber: 11,
					axisLine: {
						show: true,
						lineStyle: {
							color: [
								[0.09, 'lime'],
								[0.82, '#1e90ff'],
								[1, '#ff4500']
							],
							width: 3,
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					splitLine: {
						show: true,
						length: 25,
						lineStyle: {
							width: 3,
							color: '#fff',
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					axisTick: {
						show: true,
						splitNumber: 5,
						length: 15,
						lineStyle: {
							color: 'auto',
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					axisLabel: {
						fontWeight: 'bold',
						color: '#fff',
					},
					pointer: {
						show: true,
						length: '70%',
						width: 8,
					},
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1,
						shadowBlur: 10,
						shadowColor: '#fff',
					},
					emphasis: {
						itemStyle: {
							shadowBlur: 20,
						}
					},
					title: {
						show: true,
						fontSize: 30,
						fontWeight: 'bold',
						color: '#fff',
						fontStyle: 'italic'
					},
					detail: {
						fontWeight: 'bold',
						color: '#fff',
						backgroundColor: 'rgba(30,144,255,0.8)',
						borderWidth: 1,
						borderColor: '#fff',
						shadowBlur: 5,
						shadowColor: '#fff',
						offsetCenter: [0, '50%'],
					}
				},
				{
					name: '转速',
					type: 'gauge',
					data: [
						{ name: 'x1000 r/min', value: 1.5 },
					],
					radius: '30%',
					center: ['25%', '55%'],
					endAngle: 45,
					min: 0,
					max: 7,
					splitNumber: 7,
					axisLine: {
						lineStyle: {
							color: [
								[0.29, 'lime'],
								[0.86, '#1e90ff'],
								[1, '#ff4500']
							],
							width:2,
							shadowColor:'#fff',
							shadowBlur:10,
						}
					},
					splitLine: {
						show: true,
						length:20,
						lineStyle: {
							width: 3,
							color: '#fff',
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					axisTick:{
						length:12,
						lineStyle:{
							color:'auto',
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					axisLabel:{
						fontWeight:'bold',
						color:'#fff',
					},
					pointer:{
						width:5,
					},
					title:{
						offsetCenter:[0,'-30%'],
						fontWeight:'bold',
						color:'#fff',
						fontStyle:'italic'
					},
					detail: {
						fontWeight:'bold',
						color: '#fff',
						offsetCenter: [25, '20%'],
					}
				},
				{
					name:'油表',
					type:'gauge',
					data:[
						{name:'gas',value:0.5}
					],
					radius: '30%',
					center: ['75%', '50%'],
					startAngle:135,
					endAngle: 45,
					min: 0,
					max: 2,
					splitNumber: 2,
					axisLine: {
						lineStyle: {
							color: [
								[0.2, 'lime'],
								[0.8, '#1e90ff'],
								[1, '#ff4500']
							],
							width:2,
							shadowColor:'#fff',
							shadowBlur:10,
						}
					},
					splitLine:{
						length:15,
						lineStyle: {
							width: 3,
							color: '#fff',
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					axisTick:{
						length:12,
						lineStyle:{
							color:'auto',
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					axisLabel:{
						fontWeight:'bold',
						color:'#fff',
						formatter:function(param){
							//console.log(param);	分割线对应的索引值
							switch(param){
								case 0: return 'E';
								case 1: return 'Gas';
								case 2: return 'F';
							}
						}
					},
					pointer:{
						width:2,
					},
					title:{
						show:false,
					},
					detail:{
						show:false,
					}
				},
				{
					name:'水表',
					type:'gauge',
					data:[
						{name:'Water',value:0.5}
					],
					radius: '30%',
					center: ['75%', '50%'],
					startAngle:315,
					endAngle: 225,
					min: 0,
					max: 2,
					splitNumber: 2,
					axisLine: {
						lineStyle: {
							color: [
								[0.2, 'lime'],
								[0.8, '#1e90ff'],
								[1, '#ff4500']
							],
							width:2,
							shadowColor:'#fff',
							shadowBlur:10,
						}
					},
					splitLine:{
						length:15,
						lineStyle: {
							width: 3,
							color: '#fff',
							shadowBlur: 10,
							shadowColor: '#fff',
						}
					},
					axisTick:{
						show:false
					},
					axisLabel:{
						fontWeight:'bold',
						color:'#fff',
						formatter:function(param){
							//console.log(param);	分割线对应的索引值
							switch(param){
								case 0: return 'H';
								case 1: return 'Water';
								case 2: return 'C';
							}
						}
					},
					pointer:{
						width:2,
					},
					title:{
						show:false,
					},
					detail:{
						show:false,
					}
				}
			]
		};
		myChart.setOption(option);

		setInterval(function(){
			option.series[0].data[0].value=(Math.random()*100).toFixed(2);
			option.series[1].data[0].value=(Math.random()*7).toFixed(2);
			option.series[2].data[0].value=(Math.random()*2).toFixed(2);
			option.series[3].data[0].value=(Math.random()*2).toFixed(2);

			myChart.setOption(option);
		},2000);
	</script>
</body>

</html>